<template>
  <div class="contract-payment">
    <a-card title="打款管理">
      <div slot="extra">
        <a-button type="primary" @click="addModal">添加打款</a-button>
      </div>
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.payment_id"
        :columns="paymentColumns"
        :data-source="paymentData"
      >
        <template slot="amount" slot-scope="text">
          <a-tag color="red">{{ text }}</a-tag>
        </template>
        <template slot="receive_account_type" slot-scope="text">
          {{ accountOptions[text] }}
        </template>
        <template slot="img" slot-scope="text">
          <a :href="text" target="_blank">
            <img :src="text" width="30" height="30">
          </a>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" style="margin-right:10px" @click="editModal(record.payment_id)">编辑</a-button>
          <a-popconfirm
            title="是否删除打款"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDel(record.payment_id)"
          >
            <a-button type="danger" size="small">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <a-modal
      centered
      v-model="addVisible"
      title="添加打款信息"
      @ok="addPayment"
      @cancel="resetForm('addForm')"
    >
      <a-form-model
        ref="addForm"
        :rules="ruleForm"
        :model="form"
      >
        <a-form-model-item class="form-item" label="打款类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择打款类型">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款金额" prop="amount">
          <a-input-number style="width: 100%;" v-model="form.amount" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款时间" prop="payment_time">
          <a-date-picker
            :show-time="{ format: 'HH:mm' }"
            :value="form.payment_time"
            format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
            @change="onChange"
          >
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="收款帐户" prop="receive_account_type">
          <a-select
            v-model="form.receive_account_type"
          >
            <a-select-option v-for="(item, index) in accountOptions" :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款账号" prop="payment_account">
          <a-input v-model="form.payment_account" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款证明" prop="img">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="upload"
            :headers="headers"
            @change="handleChange"
          >
            <img v-if="form.img" :src="form.img" width="100" height="100" />
            <div v-else>
              <div class="ant-upload-text">
                上传证明
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="打款备注">
          <a-textarea v-model="form.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      v-model="editVisible"
      title="编辑打款信息"
      @ok="editPayment"
      @cancel="resetForm('editForm')"
    >
      <a-form-model
        ref="editForm"
        :rules="ruleForm"
        :model="form"
      >
        <a-form-model-item class="form-item" label="打款类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择打款类型">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款金额" prop="amount">
          <a-input-number style="width: 100%;" v-model="form.amount" placeholder="填写打款金额" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款时间" prop="payment_time">
          <a-date-picker
            :show-time="{ defaultValue: moment('00:00', 'HH:mm') }"
            :value="form.payment_time"
            format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
            @change="onChange"
          >
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="收款帐户" prop="receive_account_type">
          <a-select
            v-model="form.receive_account_type"
            placeholder="选择收款账户"
          >
            <a-select-option v-for="(item, index) in accountOptions" :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款账号" prop="payment_account">
          <a-input v-model="form.payment_account" type="text" placeholder="填写打款账户" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款证明" prop="img">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="upload"
            :headers="headers"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="form.img" :src="form.img" width="100" height="100" />
            <div v-else>
              <div class="ant-upload-text">
                上传证明
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="打款备注" prop="remarks">
          <a-textarea v-model="form.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import storage from 'store'
  import { STable } from '@/components'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'
  import { getPayment, getAddPay, delPayment, addPay, getEditPay, postEditPay } from '@/api/contract'
  import contractColumns from '@/columns/contract'
  const paymentColumns = contractColumns.finance
  export default {
    props: {
      query: {
        type: Object,
        defalut: () => {}
      }
    },
    components: {
      STable
    },
    name: 'Payment',
    data () {
      return {
        paymentColumns,
        paymentData: [],
        accountOptions: [],
        queryParam: this.query,
        addVisible: false,
        editVisible: false,
        paymentId: 0,
        form: {
          amount: '',
          payment_time: '',
          receive_account_type: '',
          payment_account: '',
          img: '',
          remarks: ''
        },
        ruleForm: {
          type: [
            { required: true, message: '必须选择打款类型', trigger: 'change' }
          ],
          amount: [
            { required: true, message: '必须填写打款金额', trigger: 'blur' }
          ],
          payment_time: [
            { required: true, message: '必须选择打款时间', trigger: 'change' }
          ],
          receive_account_type: [
            { required: true, message: '必须选择收款账户', trigger: 'change' }
          ],
          payment_account: [
            { required: true, message: '必须填写打款账号', trigger: 'change' }
          ],
          img: [
            { required: true, message: '必须上传打款证明', trigger: 'change' }
          ]
        },
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        upload: apis.Upload,
        fileList2: [],
        typeOpts: {}
      }
    },
    created () {
      this.init()
    },
    methods: {
      moment,
      init () {
        const app = this
        const query = {}
        query['filter[contract_id]'] = this.queryParam['contract_id']
        getPayment(query).then(res => {
          if (res.status === 0) {
            app.paymentData = res.result['data']
            app.accountOptions = res.result['receive_account_opts']
          }
        })
      },
      addModal () {
        const app = this
        getAddPay(app.queryParam['contract_id']).then(res => {
          if (res.status === 0) {
            app.typeOpts = res.result.typeOpts
            app.accountOptions = res.result['receive_account_opts']
            app.addVisible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      editModal (id) {
        const app = this
        const params = Object.assign({ contract_id: app.queryParam['contract_id'] }, { payment_id: id })
        const form = {}
        app.paymentId = id
        getEditPay(params).then(res => {
          app.typeOpts = res.result.typeOpts
          if (res.status === 0) {
            for (const k in res.result.contract_payment) {
              form[k] = res.result.contract_payment[k]
            }
            app.form = form
            app.editVisible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      addPayment () {
        const app = this
        const form = {}
        app.$refs.addForm.validate(valid => {
          if (valid) {
            for (const k in app.form) {
              form['contract_payment[' + k + ']'] = app.form[k]
            }
            form.contract_id = app.queryParam['contract_id']
            addPay(form).then(res => {
              if (res.status === 0) {
                app.addVisible = false
                app.init()
                app.$emit('addPayment')
                app.resetForm()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      editPayment () {
        const app = this
        const form = {}
        app.$refs.editForm.validate(valid => {
          if (valid) {
            for (const k in app.form) {
              form['contract_payment[' + k + ']'] = app.form[k]
            }
            form.contract_id = app.queryParam['contract_id']
            form.payment_id = app.paymentId
            postEditPay(form).then(res => {
              if (res.status === 0) {
                app.editVisible = false
                app.init()
                app.$emit('addPayment')
                app.resetForm()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$error({
            title: '图片必须是jpg或png类型'
          })
        }
        return isJpgOrPng
      },
      handleChange (info) {
        if (info.file.status === 'done') {
          this.form['img'] = info.file.response.result.url
        }
      },
      onDel (id) {
        const app = this
        app.queryParam['payment_id'] = id
        delPayment(app.queryParam).then(res => {
          if (res.status === 0) {
            app.init()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onChange (date, dateString) {
        this.form['payment_time'] = dateString
      },
      resetForm () {
        this.form = {
          amount: '',
          payment_time: '',
          receive_account_type: '',
          payment_account: '',
          img: '',
          remarks: ''
        }
      }
    }
  }
</script>

<style scoped>
  .form-item {
    margin-bottom: 5px !important;
  }
</style>
